<template>
	<div>
		<div class="note" :style ="note">
			<div class="inform">
				<div class="time" @click="times">
					<span>{{time}}</span>
					<i class="iconfont iconxuexi_icon_xiala"></i>
				</div>
				<span class="sr" @click="mybirthday">我的生日</span> 
			</div>
			<div class="kalendar">
				<div class="week">
					<div v-for="(item,index) in week" :key="index"><span>{{item}}</span></div>
				</div>
				<div class="weeks" @touchstart="touchstart()" @touchend="touchend()">
					  <div class="swiper-container">
						<div class="swiper-wrapper">
										<!-- swiper-slide为一个星期的盒子 滑动的切换一整行，class名必须为swiper-slide，否则不能滑动 -->
						  <div  class="swiper-slide" v-for="(item,index) in showDay" :key="index">
								<div class="weekbox">
									<div v-for="(subitem,subindex) in item" :key="subindex" @click.stop="getB(subitem,subindex,index)">
										<span :class="subitem.iscurday?'curdatebackground':' '">{{subitem.dayTemp}}</span>
									</div>
								</div>
						  </div>
						</div>
					  </div>
        		</div>
			</div>
			<div class="step"> 
				<div class="s1" v-if="BirthdayList.length!=0">
					<span>今天有</span><span class="num">{{BirthdayList.length}}</span><span>位同志过</span><span class="zzsr">“政治生日”</span>
				</div>
				<div class="s2" v-if="BirthdayList.length!=0">
					<span>快为他们送上你的生日祝福</span>
				</div>
				<div class="s3" v-if="BirthdayList.length==0">
					<span>今天无人过政治生日哦~</span>
				</div>
			</div>
		</div>
		<div class="list"> 
			<div class="bar" v-for="(item,index) in BirthdayList" :key="index">	
				<div class="lf">
					<div class="pic">
						<img :src="item.photo" alt=""> 
					</div>
					<div class="info">
						<div>
							<span class="name">{{item.name}}</span>
							<span class="year">{{item.anniversary}}周年</span>
						</div>
						<p>{{item.org_name}}</p>
					</div>
				</div>
				<div class="wish" @click="giveWish(item)">
					<span>送祝福</span>
				</div>
			</div>
		</div>
		<mu-paper :z-depth="1" class="demo-date-picker" v-if="showTime">
			<div class="shadow" @click="showTime = false"></div>
			<mu-date-picker style="z-index:999999" type="month" :date.sync="date1" @change="changeTime" v-if="showTime"></mu-date-picker>
		</mu-paper>
    
	</div>
</template> 

<script>
	import Swiper from "swiper";
	export default {
			data() {
				return {
					date1: undefined,
					showTime: false,
					week:['日','一','二','三','四','五','六'],
					showDay:[],
					timestamp:0,
					shiftIdx:0,
					Maxtimestamp:0,
					Mintimestamp:0,
					startX:'',
					startY:'',
					time:'',
					BirthdayList:[],//生日列表
					note: {
						backgroundImage: "url(" + require("@as/img/shengri_paihang_3@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100%",
					},
				}
			},
			updated : function(){
				
			},
			mounted() {
				this.$progress.done();
				var mySwiper = new Swiper(".swiper-container", {
					pagination:'.pagination',
					loop: false,
					observer:true, //修改swiper自己或子元素时，自动初始化swiper 
					observeParents:false, //修改swiper的父元素时，自动初始化swiper 
					onSlideChangeEnd: function(swiper){ 
			　　　swiper.update();  
			　　  mySwiper.reLoop();  
					}
				});

				this.shifLeft();
				this.shifRigth();
				// this.shifRigth();


			},
			methods: {
                getB(time,index,clickIndex){
                    let year =this.time.replace(/年/,'-').replace(/月/,'-')
                    console.log(time.dayTemp)
					console.log(year+time.dayTemp)
					console.log(new Date(year+time.dayTemp).getTime());
                    for(var i in this.showDay){
                        for(var j in this.showDay[i]){
                            this.showDay[i][j].iscurday =false;
						}
					}
					console.log(this.showDay[clickIndex][index]);
                    this.showDay[clickIndex][index].iscurday =true;
					this.getBirthdayList(parseInt(new Date(year+time.dayTemp).getTime()/1000))
				},
				changeTime(e) {
					let year = e.getFullYear();       
					let month = e.getMonth() + 1;              
					this.date1 = year + "年";
					if(month < 10)
							this.date1 += "0";
					this.date1 += month + "月";
					this.time = this.date1;
					console.log(11111,this.time)
					this.showTime = false;
				},
				times:function(){
					this.showTime = true;
				},
				timeNone:function(){
					this.showTime = false; 
				},
				// 我的生日
				mybirthday () {
					this.$router.push({ path: '../organization/mybirthday' })
				},
				// 送祝福
				giveWish (item) {
					this.$router.push({ path: '../organization/giveWish', query: item })
				},
				//显示当前时间年月
				showCurentTime(){ 
					let now = new Date(this.timestamp);
					// console.log(555,now)
					let year = now.getFullYear();       
					let month = now.getMonth() + 1;              
					this.time = year + "年";
					if(month < 10)
							this.time += "0";
					this.time += month + "月";
					this.time = this.time;
					console.log(111112,this.time)
				},
				cmpDate(dat1,dat2){
					if(dat1.getFullYear() == dat2.getFullYear() &&
						dat1.getMonth() == dat2.getMonth() &&
						dat1.getDate() == dat2.getDate()
						)
						return true;
					else
						return false;
				},
				// 左划动态数据
				shifLeft () {
					// debugger
					let curdate = new Date();
					this.shiftIdx++;
					this.timestamp = this.timestamp+604800000;
					if(this.timestamp>this.Maxtimestamp-604800000)
					{
						let arr = new Array();
						for(let i =0 ;i<7;i++){
							let dateTemp = new Date(this.Maxtimestamp+86400000*i);
							let dayTemp = dateTemp.getDate(); 
							arr.push({dayTemp:dayTemp,iscurday:this.cmpDate(curdate,dateTemp)});
						}
						if(JSON.stringify(arr) != JSON.stringify(this.showDay[this.showDay.length-1])){
							// debugger
							this.showDay.push(arr);
						}	
						console.log("shifLeft");
						console.log(this.showDay);
						this.Maxtimestamp = this.timestamp;
					}
					this.showCurentTime();
				},
				// 右划动态数据
				shifRigth () {
						// debugger
						this.shiftIdx--;
						let curdate = new Date();
						this.timestamp = this.timestamp-604800000;
						if(this.timestamp<this.Mintimestamp+604800000)
						{
							let arr = new Array();
							for(let i =6 ;i>=0;i--){
								let dateTemp = new Date(this.timestamp+86400000*i);
								let dayTemp = dateTemp.getDate(); 
								arr.unshift({dayTemp:dayTemp,iscurday:this.cmpDate(curdate,dateTemp)});
							}
							if(JSON.stringify(arr) != JSON.stringify(this.showDay[0])){
								// debugger
								this.showDay.unshift(arr)
							}
								
							console.log("shifRigth");
							console.log(this.showDay)
							this.Mintimestamp = this.timestamp;
						}
						this.showCurentTime();
				},
				touchstart() {
					let that = this;
					that.startX = event.changedTouches[0].pageX
					that.startY = event.changedTouches[0].pageY
				},
				touchend() { // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
					// debugger
					let that = this;
					var moveEndX = event.changedTouches[0].pageX
					var moveEndY = event.changedTouches[0].pageY
					var X = moveEndX - that.startX
					var Y = moveEndY - that.startY
					if ( X > 0) {
						that.shifRigth();
					} else if ( X < 0)   {
						that.shifLeft();
					}
				},
				// 获取生日列表
				async getBirthdayList (new_days) {
					let that = this;
					try {
						let params = {
							new_days,
							uid: JSON.parse(window.Cookies.get("user_71ydj")).id,
						}
						const url = `/app/Organization/birthday_list`
						let res = await that.$http.get(url, params)
						that.$progress.done()
						if (res.code === 200) {
							that.BirthdayList = res.data.data
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
			},
			created(){
				// debugger
				this.timestamp = Date.parse(new Date());
				for(let i =-7 ;i<0;i++){
					let dateTemp = new Date(this.timestamp+86400000*i);
					let dayTemp = dateTemp.getDay(); 
					if(dayTemp==0){
						this.timestamp = this.timestamp+86400000*i;
						console.log(dateTemp.getDate(),dayTemp);
						break;
					}
				}
				this.Mintimestamp = this.timestamp;
				this.Maxtimestamp = this.timestamp;
				this.shifLeft();
				this.showCurentTime();
				console.log(parseInt(new Date().getTime()/1000))
				// 获取生日列表
				this.getBirthdayList(parseInt(new Date().getTime()/1000))
			}
	}
</script>


<style scoped lang="scss">
	.demo-date-picker {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999999999999999;
	}
	.shadow {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		margin: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	/deep/ .mu-picker{
		top: 50%;
		left: 50%;
		position: absolute;
		height:380px;
		transform: translate(-50%, -50%);
		color: #f06546 !important;
	}
	.curdatebackground{
		display: inline-block;
		background:#fddca1;
		text-align: center;
		width:21px;
		height:21px;
		border-radius: 50%;
		color: #FFF !important;
	}
	.week{
		width: 100%;
	}
	.swiper-container {
		width: 100%;
		.swiper-slide .weekbox{
			width:100%;
			display: flex;
			// border:1px solid red;
			div{
				width:62px;
				text-align: center;
				span{
					font-size: 14px;
					color:#333;
					font-weight: 550;
				}
			}
		}
	}

  .note{
		padding: 38px 0 0 0;
		box-sizing: border-box;
		width:100%;
		height:362.5px;
		position: relative;
		.inform{
			width:100%;
			display: flex;
			padding: 0 15px;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			margin-top: 25px;
			.time{
				display: flex;
				align-items: center;
				span{
					font-size: 20px;
					color: #333;
					font-weight: bold;
				}
				i {
					font-size: 14px;
					color: #e3e3e4;
					margin-left: 2px;
				}
			}
			.sr{
				color: #333;
				font-size: 14px;
			}
		}
		.kalendar{
			width:100%;
			padding: 15px 0;
			display: flex;
			flex-direction: column;
			.week{
				width:100%;
				display: flex;
				flex-wrap: nowrap;
				overflow: hidden;
				div{
					width:62px;
					display: flex;
					justify-content: center;
					align-items: center;
					span{
						font-size: 12px;
						color:#333;
					}
				}
			}
			.day{
				white-space: nowrap;
				overflow-x: scroll;
				border:1px solid blue;
				width:100%;
				.weekbox{
					display: inline-block;
					width:100%;
					height:20px;
					.bar{
						width:100%;
						display: flex;
						div{
							width:62px;
							text-align: center;
							span{
								font-size: 14px;
								color:#333;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
		.day::-webkit-scrollbar {
			display:none
		}
		.step{
			width:100%;
			display: flex;
			flex-direction: column;
			padding: 0 15px;
			margin-top: 30px;
			.s1{
				width:100%;
				display: flex;
				align-items: center;
				span{
					font-size: 14px;
					color: #333;
					font-weight: bold;
				}
				.num{
					font-size: 20px;
					color: #eb4d44;
				}
				.zzsr{
					font-size: 14px;
					color: #eb4d44;
				}
			}
			.s2{
				width:100%;
				display: flex;
				span{
					font-size: 14px;
					color: #333;
					font-weight: bold;
				}
			}
			.s3{
				width:100%;
				display: flex;
				margin-top: 15px;
				span{
					font-size: 14px;
					color: #333;
					font-weight: bold;
				}
			}
		}
	}
	.list{
		width:100%;
		padding: 15px 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top:290px;
		z-index: 99;
		.bar{
			width:100%;
			height:75px;
			box-shadow: 0px 6px 15px 2px #f1f1f1;
			padding: 15px 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFF;
			border-radius: 5px;
			margin-bottom: 15px;
			.lf{
				display: flex;
				align-items: center;
				.pic{
					width:40px;
					height:40px;
					border-radius: 50%;
					overflow: hidden;
					img{
						width:100%;
						height:100%;
					}
				}
				.info{
					display: flex;
					flex-direction: column;
					margin-left: 8px;
					div{
						display: flex;
						align-items: center;
						.name{
							color: #333;
							font-size: 14px;
						}
						.year{
							font-size: 12px;
							color: #ffad19;
							margin-left: 5px;
						}
					}
					p{
						font-size: 12px;
						color: #ccc;
					}
				}
			}
			.wish{
				width:62px;
				height:21px;
				background: #eb4d44;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					font-size: 12px;
					color:#FFF;
				}
			}
		}
		.loading {
			width: 100%;
			font-size: 14px;
			color: #dddddd;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24px;
		}
	}
</style>